import { getPokemonDetails } from "@/lib/pokemon";
export const ttl = 24 * 60 * 60 * 1000;
export default async function PokemonDetails({ id }: { id: string }) {
const pokemon = await getPokemonDetails(id);
if (!pokemon) {
return (
<div className="flex flex-col gap-4 p-4">
<h2 className="text-2xl font-bold">Not Found</h2>
<p className="text-sm">The requested Pokémon was not found.</p>
</div>
);
}
return (
<div className="flex flex-col gap-4">
<header className="w-full flex gap-4 items-end justify-between border-b border-gray-200 p-4 sticky top-0 bg-white shadow-lg">
<h2 className="text-2xl font-bold capitalize">{pokemon.name}</h2>
<h3 className="text-lg font-bold italic">#{pokemon.id}</h3>
</header>
<div className="w-full flex gap-8 px-4">
<div className="flex-1 flex flex-col gap-2">
<h4 className="text-lg font-bold">Species</h4>
<p className="text-xs italic">
{
pokemon.species.flavor_text_entries.find(
({ language }) => language.name === "en"
)?.flavor_text
}
</p>
{pokemon.species.form_descriptions.find(
({ language }) => language.name === "en"
) && (
<>
<h4 className="text-lg font-bold">Forms</h4>
<p className="text-xs">
{
pokemon.species.form_descriptions.find(
({ language }) => language.name === "en"
)?.description
}
</p>
</>
)}
<h4 className="text-lg font-bold">Height</h4>
<p className="text-xs">{pokemon.height}</p>
<h4 className="text-lg font-bold">Weight</h4>
<p className="text-xs">{pokemon.weight}</p>
<h4 className="text-lg font-bold">Base Experience</h4>
<p className="text-xs">{pokemon.base_experience}</p>
<h4 className="text-lg font-bold">Abilities</h4>
{pokemon.abilities.map((ability) => (
<div key={ability.names[0].name}>
<h5 className="text-sm font-bold">
{
ability.names.find(({ language }) => language.name === "en")
?.name
}
</h5>
<p className="text-xs">
{
ability.effect_entries.find(
({ language }) => language.name === "en"
)?.effect
}
</p>
</div>
))}
<h4 className="text-lg font-bold">Types</h4>
<p className="text-xs">
{pokemon.types
.map(
(type) =>
type.names.find(({ language }) => language.name === "en")
?.name
)
.join(", ")}
</p>
</div>
<div className="flex-1">
<img
src={pokemon.sprites.front_default}
alt={pokemon.name}
className="w-full object-fit bg-gray-200 rounded-md pixelated"
/>
</div>
</div>
</div>
);
}